<template>
  <div class="app-container">
    <div id="printBox">
      <img src="@/assets/logo.png" alt="">
      <img src="@/assets/logo.png" alt="">
      <h1>abc</h1>
      <div style="page-break-after:always;">分页1</div>
      <div style="page-break-after:always;">分页2</div>
      <div style="page-break-after:always;">分页3</div>
      <div style="page-break-after:always;">分页4</div>
    </div>
    <el-button type="primary" @click="printHTML">打印HTML</el-button>

    <el-button type="primary" @click="printPDF">打印PDF</el-button>

    <el-button type="primary" @click="printImg">打印图片</el-button>

    <el-button type="primary" @click="printJSON">打印JSON</el-button>
  </div>
</template>

<script>
// https://juejin.cn/post/6888519415717953549#heading-0
// https://printjs.crabbly.com/
import print from 'print-js';
import png from '@/assets/logo.png'
import 'print-js/dist/print.css';
export default {
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      printUrl: '@/assets/logo.png',
      printUrl2: '@/assets/logo.png',
      someJSONdata: [
        {
          name: 'John Doe',
          email: 'john@doe.com',
          phone: '111-111-1111',
        },
        {
          name: 'Barry Allen',
          email: 'barry@flash.com',
          phone: '222-222-2222',
        },
        {
          name: 'Cool Dude',
          email: 'cool@dude.com',
          phone: '333-333-3333',
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {},
  methods: {
    printHTML() {
      print({
        printable: 'printBox',
        type: 'html',
        header: '打印标题',
        targetStyles: ['*'], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      });
    },
    printJSON() {
      print({
        printable: this.someJSONdata,
        properties: ['name', 'email', 'phone'],
        type: 'json',
      });
    },
    printPDF() {
      print({ printable: 'docs/xx_large_printjs.pdf', type: 'pdf' });
    },
    printImg() {
      print({
        printable: png, // 也可设置清晰度比html绑定更高精度的图片
        type: 'image',
      });
      print({
        printable: [png, png], // 打印多张图片
        type: 'image',
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>